<!DOCTYPE html>
<html lang="en">

 <head>
   <meta charset="utf-8">
   <title>Bootstrap, from Twitter</title>

   <!-- Le styles -->
   <link href="css/bootstrap.css" rel="stylesheet">

 </head>
 <body >
   
   <div class="container">

     <!-- Main hero unit for a primary marketing message or call to action -->

     
     <div class="accordion" id="accordion2">
       <div class="accordion-group">
         <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
             <%= @story.title %>
           </a>
         </div>
         <div id="collapseOne" class="accordion-body collapse in">
           <div class="accordion-inner">
             <!--The story began when Dr.Fatma wanted to get out of the university. We2fna wa2fet ragol wa7ed, we 5alina to3od, 3lshan nenbest --> 
             <%= @story.content %>
           </div>
         </div>
       </div>
       <div class="accordion-group">
         <div class="accordion-heading">
           <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
             <!-- The end was .. -->
             Comments
           </a>
         </div>
         <div id="collapseTwo" class="accordion-body collapse">
           <div class="accordion-inner">
             <!--Nokia strated putting lots of 5awazi2, We started giving it 5awazi2 e7na kaman.-->
              <ul>
                <% @comments.each do |comment| %>
                <li>
                " <%= comment.content %> " — <%= User.find(comment.user_id).email %>
                </li>
                <% end %>

              </ul>
              

           </div>
         </div>
       </div>
     </div>

     <hr>

     <footer>
       <p>&copy; smartsoft 2012</p>
     </footer>

   </div> <!-- /container -->

   <!-- Le javascript
   ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->

 </body>
</html>

